<template>
    <div id="box">
        <div class="header">
            <a @click="backClick"><i class="el-icon-arrow-left"></i></a>
            <span>包裹通知设置</span>
            <a @click="disturbClick">免打扰</a>
        </div>
        
        <div class="body">
            <el-container>
                <el-header style="height:8vw;">极简通知</el-header>
                <el-main>
                    <div class="bodyLeft">快递已揽收<p class="importants">重要</p></div>
                    <el-switch v-model="value1" active-color="#409eff" inactive-color="#eeecf1" style="height:20px;"></el-switch>
                </el-main>
                <el-main><div class="bodyLeft">派送中<p class="importants">重要</p></div><el-switch v-model="value2" active-color="#409eff" inactive-color="#eeecf1" style="height:20px;"></el-switch></el-main>
                <el-main><div class="bodyLeft"><div class="leftTwo"><p>取件</p><span style="color:#b3afaa;">包裹到站、生鲜贵重包裹、站点下班提醒</span></div><p class="importants">重要</p></div><el-switch v-model="value3" active-color="#409eff" inactive-color="#eeecf1" style="height:20px;"></el-switch></el-main>
            </el-container>
            <el-container>
                <el-header style="height:8vw;">其他通知</el-header>
                <el-main>已发货<el-switch v-model="value4" active-color="#409eff" inactive-color="#eeecf1" style="height:20px;"></el-switch></el-main>
                <el-main>已签收<el-switch v-model="value5" active-color="#409eff" inactive-color="#eeecf1" style="height:20px;"></el-switch></el-main>
                <el-main>预计时效变更<el-switch v-model="value6" active-color="#409eff" inactive-color="#eeecf1" style="height:20px;"></el-switch></el-main>
                <el-main>果酱好物提醒<el-switch v-model="value7" active-color="#409eff" inactive-color="#eeecf1" style="height:20px;"></el-switch></el-main>
                <el-main>亲友包裹消息<el-switch v-model="value8" active-color="#409eff" inactive-color="#eeecf1" style="height:20px;"></el-switch></el-main>
            </el-container>
            <el-container>
                <el-header style="height:10px;"></el-header>
                <el-main>华为手机收到不到包裹通知解决攻略<i class="el-icon-arrow-right"></i></el-main>
            </el-container>
            <div class="warns">为保证您的体验，我们保留发生一些重要提醒，如包裹异常、快递员上门提醒、活动及优惠劵提醒、重大自然灾害提醒</div>
        </div>
    </div>
    
</template>

<script>
export default {
    data() {
            return {
                value1: true,
                value2: true,
                value3: true,
                value4: true,
                value5: true,
                value6: false,
                value7: false,
                value8: true
            }
    },
    methods: {
        
        backClick(){
            this.$router.push("/userMine")
        },
        disturbClick(){
            this.$router.push("/noDisturb")
        }
    }
}
</script>

<style lang="scss" scoped>

.header{
    height: 90px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .el-icon-arrow-left{
        font-size: 40px;
        margin-left: 10px;
    }

    span{
        font-size: 32px;
    }

    a{
        margin-right: 30px;
        font-weight: 200;
        font-size: 26px;
    }
}
.body{
    font-size: 26px;
    .el-header, .el-footer {
        background-color: #eeecf1;
        color: #333;
        line-height: 80px;
        padding-left: 15px;
        
        // height: 35px;
    }
    .el-main {
        background-color: #fff;
        color: #333;
        line-height: 80px;
        padding-left: 15px;
        border-bottom: 1px solid #f1e9e9;
        display: flex;
        justify-content: space-between;
        align-items: center;

        i{
            margin-right: 5px;
        }
        .bodyLeft{
            display: flex;
            align-items: center;
            font-size: 26px;

            .leftTwo{
                p{
                    height: 30px;
                }
            }

            .importants{
                display: inline-block;
                background-color: red;
                height: 40px;
                line-height: 40px;
                color: #fff;
                width: 60px;
                border-radius: 15px 15px 15px 0px;
                text-align: center;
                margin-left: 30px;
            }
        }
        

        .el-switch{
            height: 30px;
            margin-right: 20px;
            width: 60px;

            .el-switch__core{
                height: 25px;
            }
        }
    }
}
.warns{
    margin: 20px;
    color: #929496d6;
}
</style>